<!--
 * @Description: 
 * @Author: yucheng
 * @Date: 2024-07-19
 * @LastEditors: 余承
 * @LastEditTime: 2024-07-23
-->
<template>
  <Card :active-tab-key="key" :bordered="false" :tab-list="tabList" class="card"
    @tabChange="onTabChange" defaultExpandAll>
    <Tree :tree-data="treeData" v-model:expandedKeys="expandedKeys" block-node :height="treeHeight" />
  </Card>
</template>

<script lang='ts' setup>
import { onMounted, onUnmounted, ref } from 'vue'
import type { TreeProps } from 'ant-design-vue'
import { Card, Tree } from 'ant-design-vue'
import { getAreaTreeApi, getAdminUnitApi, getMonitorTreeApi } from '@/api/common'

const props = defineProps<{
  searchParams: {
    basin: string,
    type: string,
    planCode: string,
    yubaoType: string
  }
}>()
const tabList = [
  {
    key: '行政区划',
    tab: '行政区划',
  },
  {
    key: '管理单元',
    tab: '管理单元',
  },
  {
    key: '监测井',
    tab: '监测井',
  },
]
const key = ref('行政区划')

const onTabChange = (value: string) => {
  key.value = value
  getTreeData()
}

const treeData = ref<TreeProps['treeData']>([])

const expandedKeys = ref<TreeProps['expandedKeys']>([])
// 转换树形结构数据
const transformTreeData = (data: any) => {
  return data.map((node: any) => ({
    title: node.name,
    key: String(node.id),
    children: node.childList ? transformTreeData(node.childList) : []
  }))
}
// 获取区域树数据
const fetchAreaTreeData = async () => {
  const { data } = await getAreaTreeApi({
    basinCode: props.searchParams.basin,
    planCode: props.searchParams.planCode
  })
  treeData.value = transformTreeData(data)
}

// 获取管理单元树数据
const fetchAdminUnitTreeData = async () => {
  const { data } = await getAdminUnitApi({
    basinCode: props.searchParams.basin,
    planCode: props.searchParams.planCode
  })
  treeData.value = transformTreeData(data)
}

// 获取监测井树数据
const fetchMonitorTreeData = async () => {
  const { data } = await getMonitorTreeApi({
    basinCode: props.searchParams.basin,
    planCode: props.searchParams.planCode
  })
  treeData.value = data.map((node: any) => {
    return {
      title: node.dmName,
      key: node.dmCode,
      children: node.wellList.map((well: any) => {
        return {
          title: well.name,
          key: well.code,
        }
      })
    }
  })
}

const getTreeData = async () => {
  treeData.value = []
  expandedKeys.value = []
  switch (key.value) {
    case '行政区划':
      await fetchAreaTreeData()
      break
    case '管理单元':
      await fetchAdminUnitTreeData()
      break
    case '监测井':
      await fetchMonitorTreeData()
      break
    default:
      break
  }
  const expends: string[] = []
  treeData.value.forEach((node) => {
    expends.push(node.key as string)
    if (node.children) {
      node.children.forEach((child) => {
        expends.push(child.key as string)
      })
    }
  })
  expandedKeys.value = expends
}

const treeHeight = ref(0)

const updateTreeHeight = () => {
  const height = document.getElementsByClassName('ant-card-body')[0].clientHeight
  treeHeight.value = height
}

onMounted(() => {
  updateTreeHeight()
  getTreeData()
  window.addEventListener('resize', updateTreeHeight)
})

onUnmounted(() => {
  window.removeEventListener('resize', updateTreeHeight)
})

defineExpose({
  updateTreeData: getTreeData
})
</script>

<style lang='scss' scoped>
::v-deep(.ant-tabs-tab-btn) {
  font-size: 14px;
}

::v-deep(.ant-card-body) {
  height: calc(100% - 60px);
  overflow-y: auto;
}

.card {
  width: 300px;
  height: calc(100% - 100px);
  border-radius: 8px;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 0px 5px rgba(159, 155, 155, 0.5);
}
</style>